{include file="public/header"/}
<link rel="stylesheet" href="/static/index/css/order_info.css">
<link rel="stylesheet" href="/static/index/css/index.css">
<style type="text/css">
    .ss-modal-body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    top: 44px;
    bottom: 50px;
    left: 0;
    width: 100%;
    pointer-events: none;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    z-index: 98
}

.ss-modal-body.ss-modal-active {
    pointer-events: auto;
    opacity: 1
}

.ss-modal-body.ss-modal-H5Top {
    top: 0;
    z-index: 999
}

.ss-modal-body.ss-modal-H5Bottom {
    bottom: 0;
    z-index: 999
}

.ss-modal-body .uni-mask {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6)
}

.ss-modal {
    position: fixed;
    z-index: 2;
    -webkit-transition: inherit;
    transition: inherit
}

.ss-modal .gmy-float-touch {
    display: none
}

.ss-modal-middle {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ss-modal-cover {
    width: 100%;
    width: calc(100% + 3px);
    height: 100%;
    height: calc(100% + 3px);
    left: 0;
    top: 0;
    -webkit-transform: translate(100%);
    transform: translate(100%)
}

.ss-modal-top {
    left: 50%;
    z-index: 98;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}

.ss-modal-top + .uni-mask {
    z-index: 97
}

.ss-modal-full {
    width: 100%;
    width: calc(100% + 3px);
    left: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.ss-modal-full.ss-modal-top {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%)
}

.ss-modal-full.ss-modal-bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: inherit;
    transition: inherit
}

.ss-modal-right {
    right: 0;
    max-width: 80%
}

.ss-modal-left {
    left: 0;
    max-width: 80%
}

.ss-modal-middle.ss-modal-insert {
    min-width: 190px;
    min-height: 190px;
    max-width: 102%;
    max-height: 80%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.ss-modal-body {
    opacity: 0;
    pointer-events: none
}

.ss-modal-active {
    opacity: 1;
    pointer-events: auto
}

.ss-modal-active .ss-modal-top {
    top: 44px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.ss-modal-active .ss-modal-full {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ss-modal-active .ss-modal-full.ss-modal-top {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.ss-modal-active .ss-modal-bottom {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.ss-modal-active .ss-modal-cover {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.ss-modal-bottom {
    bottom: 0
}
</style>

<style type="text/css">
    .digital-keyboard-modal {
    height: 100%;
    background-color: #fff /* 键盘 */
}

.digital-keyboard-modal.digital-keyboard-modal-1, .digital-keyboard-modal.digital-keyboard-modal-4 {
    height: auto;
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    background: #fff url() top/100% auto no-repeat;
    padding-padding: 0;
    padding-padding: constant(safe-area-inset-top);
    padding-padding: env(safe-area-inset-top)
}

.digital-keyboard-modal.digital-keyboard-modal-2, .digital-keyboard-modal.digital-keyboard-modal-5, .digital-keyboard-modal.digital-keyboard-modal-3 {
    padding-top: 90px
}

.digital-keyboard-modal.digital-keyboard-modal-2 .dk-title, .digital-keyboard-modal.digital-keyboard-modal-5 .dk-title, .digital-keyboard-modal.digital-keyboard-modal-3 .dk-title {
    color: #000
}

.digital-keyboard-modal.digital-keyboard-modal-2 .digital-keyboard, .digital-keyboard-modal.digital-keyboard-modal-5 .digital-keyboard, .digital-keyboard-modal.digital-keyboard-modal-3 .digital-keyboard {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    position: fixed;
    left: 0;
    bottom: 0
}

.digital-keyboard-modal .dk-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 45px;
    text-align: center
}

.digital-keyboard-modal .dk-swiper {
    height: 130px
}

.digital-keyboard-modal .dk-submit {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px;
    color: #38f;
    font-size: 14px;
    line-height: 35px
}

.digital-keyboard-modal .dk-return {
    right: auto;
    left: 0
}

.digital-keyboard-modal .dk-close {
    position: fixed;
    left: 15px;
    top: 15px
}

.digital-keyboard-modal .dk-subtitle {
    font-size: 12px;
    color: #989894;
    line-height: 3;
    text-align: center
}

.digital-keyboard-modal .dk-down {
    text-align: center;
    line-height: 35px;
    -webkit-box-shadow: 0 0 0 1px #eee;
    box-shadow: 0 0 0 1px #eee
}

.digital-keyboard-modal .dk-down .dk-down-icon {
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    width: 20px;
    height: 20px;
    display: inline-block;
    -webkit-transform: scale(.5) rotate(-45deg);
    transform: scale(.5) rotate(-45deg)
}

.digital-keyboard-modal .pwd-tips {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
    padding: 7px 50px
}

.digital-keyboard-modal .pwd-tips-errot {
    color: #ff4242;
    font-size: 15px;
    text-align: center
}

.digital-keyboard-modal .pwd-forget {
    font-size: 12px;
    color: #26c6b3;
    padding: 10px 0 15px;
    text-align: center;
    line-height: 16px
}

.digital-keyboard-modal .digital-keyboard {
    -webkit-box-shadow: 0 -1px 0 1px #eee;
    box-shadow: 0 -1px 0 1px #eee;
    width: 100%;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.digital-keyboard-modal .digital-key-box {
    -webkit-box-shadow: 0 0 0 1px #eee;
    box-shadow: 0 0 0 1px #eee;
    position: relative;
    overflow: hidden;
    width: 100%
}

.digital-keyboard-modal .digital-keyboard-show {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.digital-keyboard-modal .num {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    float: left;
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 1px #eee;
    box-shadow: 0 0 0 1px #eee;
    width: 33.33333333%;
    cursor: pointer;
    height: 50px;
    text-align: center;
    color: #333;
    line-height: 50px;
    font-size: 27px;
    font-weight: 700;
    position: relative;
    overflow: hidden
}

.digital-keyboard-modal .num:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: -webkit-radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 0);
    background-image: radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 0);
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out, -webkit-transform .2s ease-in-out;
    transition: opacity .3s ease-in-out, -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out, opacity .3s ease-in-out;
    transition: transform .2s ease-in-out, opacity .3s ease-in-out, -webkit-transform .2s ease-in-out
}

.digital-keyboard-modal .num:active:after {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: .5;
    -webkit-transition: 0s;
    transition: 0s
}

.digital-keyboard-modal .num:nth-of-type(3n + 1) {
    border-bottom: 0;
    border-left: 0
}

.digital-keyboard-modal .num:nth-of-type(3n + 2) {
    border-bottom: 0;
    border-left: 0;
    border-right: 0
}

.digital-keyboard-modal .num.no-num {
    background-color: #f2f2f2;
    font-size: 0
}

.digital-keyboard-modal .num:last-child {
    background: #f2f2f2 url() 50%/auto 25px no-repeat
}

.digital-keyboard-modal .pwd-box {
    padding-left: 5px;
    position: relative;
    text-align: center
}

.digital-keyboard-modal .pwd-text {
    position: relative;
    line-height: 55px;
    vertical-align: middle;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    width: 46px;
    height: 46px;
    margin-right: 5px;
    display: inline-block;
    -webkit-box-shadow: 0 0 0 1px #ccc;
    box-shadow: 0 0 0 1px #ccc;
    overflow: hidden
}

.digital-keyboard-modal .pwd-text.active:after {
    -webkit-animation: twinkle-data-v-0b1f9cd8 1s infinite;
    animation: twinkle-data-v-0b1f9cd8 1s infinite;
    height: 70%;
    width: 2px;
    content: "";
    position: absolute;
    top: 15%;
    left: 50%;
    margin-left: -1px;
    background-color: #4fa5e1
}

@-webkit-keyframes twinkle-data-v-0b1f9cd8 {
    from {
        background-color: #4fa5e1
    }
    to {
        background-color: transparent
    }
}

@keyframes twinkle-data-v-0b1f9cd8 {
    from {
        background-color: #4fa5e1
    }
    to {
        background-color: transparent
    }
}
</style>

<style type="text/css">
    .container1 {
    background-color: #edf3fb;
    padding: 0 20px 20px;
    min-height: 100vh;
    height: 100% !important
}

.container1 .address {
    height: 80px;
    background: #fff;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 20px 20px 20px 70px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px 0;
    position: relative
}

.container1 .address .location {
    height: 40px;
    width: 40px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    overflow: hidden;
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.container1 .address .location uni-image {
    width: 100%;
    height: 100%
}

.container1 .address .top {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #131415;
    height: 24px
}

.container1 .address .bottom .name, .container1 .address .bottom .phone {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #717273;
    line-height: 16px
}

.container1 .address .bottom .name {
    margin-right: 10px
}

.container1 .address .arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.container1 .address .arrow uni-text {
    font-size: 25px;
    color: #8e9297
}

.container1 .card {
    background-color: #fff;
    -webkit-border-radius: 12px;
    border-radius: 12px
}

.container1 .status {
    padding: 10px 15px;
    margin-top: 20px
}

.container1 .status uni-text {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1px
}

.container1 .goods {
    margin: 20px 0;
    padding: 0 15px 15px
}

.container1 .goods .top {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000
}

.container1 .goods .top .iconfont {
    margin-right: 7px
}

.container1 .goods .bottom {
    padding-left: 100px;
    position: relative
}

.container1 .goods .bottom uni-image {
    height: 90px;
    width: 90px;
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.container1 .goods .bottom .right {
    position: relative
}

.container1 .goods .bottom .right .title {
    font-size: 13px;
    font-family: Gilroy-Medium, Gilroy;
    font-weight: 500;
    color: #000;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.container1 .goods .bottom .right .number {
    position: relative;
    margin: 10px 0 5px
}

.container1 .goods .bottom .right .number uni-text {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000
}

.container1 .goods .bottom .right .number uni-text:last-of-type {
    font-size: 14px;
    color: #989998;
    font-weight: 500;
    position: absolute;
    right: 0
}

.container1 .goods .bottom .right .tag {
    padding: 5px 10px;
    background: rgba(252, 227, 226, .8);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #f37374
}

.container1 .count {
    padding: 15px 15px;
    margin-bottom: 118px
}

.container1 .count .flex-row {
    margin-bottom: 15px
}

.container1 .count .flex-row uni-text {
    font-size: 14px;
    font-family: Gilroy-Medium, Gilroy;
    font-weight: 500
}

.container1 .count .flex-row uni-text:first-of-type {
    color: #666
}

.container1 .count .flex-row uni-text:last-of-type {
    color: #000;
    float: right
}

.container1 .count .flex-row:last-of-type {
    margin-bottom: 0
}

.container1 .fix {
    background-color: #fff;
    position: fixed;
    width: 100%;
    bottom: 55px;
    height: 72px;
    background: #fff;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    left: 0;
    padding: 20px 15px 20px 30px;
    z-index: 999;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #edf3fb
}

.container1 .fix div {
    line-height: 32px;
    display: inline-block;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #f37374
}

.container1 .fix uni-button {
    float: right;
    background: #ff2442
}
</style>


<body class="uni-body pages-order-info">
<noscript><strong>请启用 JavaScript 以继续.</strong></noscript>
<uni-app class="uni-app--maxwidth">
    <uni-page data-page="pages/order/info">
        <uni-page-wrapper>
            <uni-page-body>
                <div class="container1">
                    <div class="top-page"
                         style="height: 44px; background: linear-gradient(to right, rgb(237, 243, 251), rgb(237, 243, 251));">
                        <div class="apex"
                             style="height: 44px; line-height: 44px; background: linear-gradient(to right, rgb(237, 243, 251), rgb(237, 243, 251)); color: rgb(0, 0, 0); position: fixed;">
                            <uni-view data-v-71fba4a1="" class="left">
                                <a href="javascript:window.history.go(-1)" >
                                    <uni-text class="iconfont icon-fanhui1" style="font-size: 16px; color: rgb(0, 0, 0);"><span></span></uni-text></a>
                            </uni-view>
                            <div class="center" style="font-size: 17px;">订单详情</div>
                            <div class="right"></div>
                        </div>
                        <div class="placeholder" style="height: 44px; line-height: 44px;"></div>
                    </div>
                    <div class="address flex-column">
                        <div class="location">
                            <uni-image>
                                <div style="background-image: url(&quot;./static/img/location.png&quot;); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;">
                                </div>
                                <img src="./static/img/location.png" draggable="true">
                                <!---->
                            </uni-image>
                        </div>
                        <div class="top">{$user_info.address_name}</div>
                        <div class="bottom">
                            <uni-text class="phone"><span>{$user_info.address_phone}</span></uni-text>
                        </div>
                        <div class="arrow">
                            <a href="{:Url('account/address')}">
                            <uni-text class="iconfont icon-bianji"><span></span></uni-text>
                            </a>
                        </div>
                    </div>

                    <div class="status card">
                        {switch info.status}
                        {case 0}<uni-text data-v-27e0cf69="" class="txt"><span>订单进行中</span></uni-text>{/case}
                        {case 1}<uni-text data-v-27e0cf69="" class="txt"><span>订单已完成</span></uni-text>{/case}
                        {case 2}<uni-text data-v-27e0cf69="" class="txt"><span>待结算订单</span></uni-text>{/case}
                        {case 3}<uni-text data-v-27e0cf69="" class="txt"><span>订单已冻结</span></uni-text>{/case}
                        {/switch}
                    </div>

                    {if $info.status == 0}
                    <uni-view data-v-27e0cf69="" class="status card">
                        <uni-text data-v-27e0cf69="" class="txt">
                            <span class="time" id="{$info.id}" data-timestamp="{$info.sub_time}">等待买家确认。您的订单将被放置&nbsp;<span id="show_time"></span>:进入冻结状态。
                            </span>
                        </uni-text>
                    </uni-view>
                    {/if}

                    {if $info.status == 2}
                    <uni-view data-v-27e0cf69="" class="status card">
                        <uni-text data-v-27e0cf69="" class="txt">
                            <span class="time" id="{$info.id}" data-timestamp="{$info.settle_time}">
                                系统将在之后 <span id="show_time"></span>
                            </span>
                        </uni-text>
                    </uni-view>
                    {/if}

                    <div class="card goods">
                        <div class="top flex-row">
                            <uni-text class="iconfont icon-shangdian"><span></span></uni-text>
                            <uni-text><span>亚马逊旗舰店</span></uni-text>
                        </div>
                        <div class="bottom flex-row">
                            <uni-image data-v-27e0cf69="">
                                <div style="background-image: url({$info.goods_pic}); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;"></div>
                                <img src="{$info.goods_pic}">
                            </uni-image>
                            <uni-view data-v-27e0cf69="" class="right">
                                <uni-view data-v-27e0cf69="" class="title">{$info.order_id}</uni-view>
                                <uni-view data-v-27e0cf69="" class="number flex-row">
                                    <uni-text data-v-27e0cf69=""><span>${$info.goods_price}</span></uni-text>
                                    <uni-text data-v-27e0cf69=""><span>x1</span></uni-text>
                                </uni-view>
                                <uni-view data-v-27e0cf69="" class="tag"> 官方保证</uni-view>
                            </uni-view>
                        </div>
                    </div>

                    <div class="count card">
                        <uni-view data-v-27e0cf69="" class="flex-row">
                            <uni-text data-v-27e0cf69=""><span> 总金额</span></uni-text>
                            <uni-text data-v-27e0cf69=""><span>${$info.goods_price}</span></uni-text>
                        </uni-view>
                        {if $info.order_commission != 0}
                        <uni-view data-v-27e0cf69="" class="flex-row">
                            <uni-text data-v-27e0cf69=""><span>佣金</span></uni-text>
                            <uni-text data-v-27e0cf69=""><span>{$info.order_commission * 100} %</span></uni-text>
                        </uni-view>
                        {/if}
                        <uni-view data-v-27e0cf69="" class="flex-row">
                            <uni-text data-v-27e0cf69=""><span>收益</span></uni-text>
                            <uni-text data-v-27e0cf69=""><span>{$info.order_earnings}</span></uni-text>
                        </uni-view>
                        <uni-view data-v-27e0cf69="" class="flex-row">
                            <uni-text data-v-27e0cf69=""><span>支付状态</span></uni-text>
                            <uni-text data-v-27e0cf69="">Paid</uni-text>
                        </uni-view><!---->
                    </div>
                    {switch info.status}
                    {case 0}
                    <div  class="fix flex-row">
                        <div >${$info.goods_price}</div>
                        <uni-button  class="pay_btn" type="warn" size="mini"> 支付</uni-button>
                    </div>
                    {/case}
                    {/switch}
                    <div>
                        <!-- ss-modal-active -->
                        <div data-platform="windows"
                             class="ss-modal-body ss-modal-H5Top ss-modal-H5Bottom">
                            <div class="ss-modal ss-modal-bottom ss-modal-full">
                                <div class="digital-keyboard-modal digital-keyboard-modal-1">
                                    <!---->
                                    <uni-swiper class="dk-swiper">
                                        <div class="uni-swiper-wrapper">
                                            <div class="uni-swiper-slides">
                                                <div class="uni-swiper-slide-frame"
                                                     style="width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
                                                    <uni-swiper-item
                                                            style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
                                                        <div class="dk-title">输入支付密码</div>
                                                        <div class="dk-subtitle">输入支付密码/div>
                                                        <div class="pwd-box clearfix">
                                                            <div data-index="0" class="pwd-text active"></div>
                                                            <div data-index="1" class="pwd-text"></div>
                                                            <div data-index="2" class="pwd-text"></div>
                                                            <div data-index="3" class="pwd-text"></div>
                                                            <div data-index="4" class="pwd-text"></div>
                                                            <div data-index="5" class="pwd-text"></div>
                                                        </div>
                                                    </uni-swiper-item>
                                                </div>
                                            </div>
                                        </div>
                                    </uni-swiper>
                                    <!---->
                                    <div class="pwd-forget"></div>
                                    <div class="digital-keyboard digital-keyboard-show">
                                        <!---->
                                        <div class="digital-key-box clearfix">
                                            <div class="num">1</div>
                                            <div class="num">2</div>
                                            <div class="num">3</div>
                                            <div class="num">4</div>
                                            <div class="num">5</div>
                                            <div class="num">6</div>
                                            <div class="num">7</div>
                                            <div class="num">8</div>
                                            <div class="num">9</div>
                                            <div class="num no-num"></div>
                                            <div class="num">0</div>
                                            <div class="num no-num">-1</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div catchtouchmove="true" class="uni-mask"></div>
                            <input type="hidden" id="id" value="{$info.id}">
                        </div>
                    </div>
                    {include file="public/footer"/}
                </div>
            </uni-page-body>
        </uni-page-wrapper>
    </uni-page>
</uni-app>

{present name="info.is_pop"}
<input type="hidden" id="is_pop" value="{$info.is_pop}">
<input type="hidden" id="pop_img" value="{$info.pop_id|get_pop}">
{/present}

<script>
    window.onload = function () {
        var id = $("#id").val();
        let $btn = document.querySelector('.pay_btn');
        let $ssModal = document.querySelector('.ss-modal-body');
        let $mask = document.querySelector('.uni-mask');
        let $keyboard = document.querySelectorAll('.digital-key-box .num');
        let $pwd = document.querySelectorAll('.pwd-box .pwd-text')
        let pwdArr = [];

        function modalOperation(type) {
            type && type == 'open' ?
                $ssModal.classList.add('ss-modal-active')
                : $ssModal.classList.remove('ss-modal-active');
        }

        $mask.addEventListener('click', modalOperation)
        $btn.addEventListener('click', () => {
            modalOperation('open')
        });

        $keyboard.forEach(element => {
            if (element.className.indexOf('no-num') == -1) {
                element.addEventListener('click', () => {

                    if (pwdArr.length < 6) {
                        $pwd[pwdArr.length].innerText = '*';
                        $pwd[pwdArr.length].classList.remove('active');
                        pwdArr.push(element.innerText);
                        $pwd[pwdArr.length] && $pwd[pwdArr.length].classList.add('active');
                        if (pwdArr.length == 6) {
                            var pass = pwdArr.join('');
                            layer.load(2);
                            $.ajax({
                                url: "{:Url('order_finish')}",
                                type: "post",
                                traditional: true,
                                data: {id:id,pass:pass},
                                success: function (e) {
                                    layer.closeAll('loading');
                                    if (e.code === 3){
                                        layer.msg(e.msg, {
                                            time: 2000,
                                            end: function () {
                                                window.location.href = "/ch/order/detail/" + e.data.id ;
                                            }
                                        });
                                    }
                                    if (e.code === 2){
                                        layer.confirm('Your balance is not enough to pay the order, please recharge!', {
                                            title:'Info',
                                            btn: ['Recharge','Cancel'] //按钮
                                        }, function(){
                                            window.location.href = "{:Url('recharge/index')}";
                                        })
                                    }
                                    if (e.code === 1) {
                                        layer.msg(e.msg, {
                                            time: 2000,
                                            end: function () {
                                                location.reload();
                                            }
                                        });
                                    }
                                    if (e.code === 0){
                                        layer.msg(e.msg, function () {
                                            return false;
                                        })
                                    }
                                },
                            });
                        }
                    }
                })
            } else if (element.innerText == '-1') {
                element.addEventListener('click', () => {
                    console.log("delete", pwdArr.length);
                    if (pwdArr.length > 0) {
                        $pwd[pwdArr.length - 1].innerText = '';
                        $pwd[pwdArr.length - 1].classList.add('active')
                        $pwd[pwdArr.length] && $pwd[pwdArr.length].classList.remove('active')
                        pwdArr.pop()//移除一个元素
                    }
                })
            }
        });
    }
</script>

<script>
    $.each($(".time"),function(){
        var timer = [];
        timer.push($(this).data("timestamp"));
        var divId = [];
        divId.push($(this).attr("id"));
        var date = new Date(parseInt(timer)*1000);
        if(timer !== 0){
            setInterval(function(){
                ShowCountDown(
                    date.getFullYear(),
                    date.getMonth()+1,
                    date.getDate(),date.getHours(),
                    date.getMinutes(),
                    date.getSeconds(),
                    divId);
            },1000);
        }
    });
    function ShowCountDown(year,month,day,h,m,s,divname)
    {
        var now = new Date();
        var endDate = new Date(year, month-1, day,h,m,s);
        var leftTime=endDate.getTime()-now.getTime();
        var leftsecond = parseInt(leftTime/1000);
        var day1=checkTime(Math.floor(leftsecond/(60*60*24)));
        var hour=checkTime(Math.floor((leftsecond-day1*24*60*60)/3600));
        var minute=checkTime(Math.floor((leftsecond-day1*24*60*60-hour*3600)/60));
        var second=checkTime(Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60));
        var cc = document.getElementById("show_time");
        if(day1 <= 0 && hour <= 0 && minute <=0 && second <= 0){
            window.clearInterval();
        }else if(day1 === "0-1" || hour === "0NaN" || minute === "0NaN" || second === "0NaN"){
            window.clearInterval();
        }else if(day1 == "00" && (hour != "0" || minute != "0" || second != "0")){
            cc.innerHTML = minute+":"+second;
        }else{
            if(cc != null){
                cc.innerHTML = minute+":"+second;
            }
        }
    }

    function checkTime(i){
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>

<script type="text/javascript" charset="utf-8">
    $(function(){
        var order_id = "{$info.id}";
        setInterval(function (){
            $.ajax({
                url: "{:Url('check_timeout')}",
                type: "post",
                traditional: true,
                data: {order_id:order_id},
                success: function (e) {
                    if (e.code === 1){
                        window.location.href = "/ch/order/index.html?type=3";
                    }
                },
            });
        } , 5000)
    })
</script>

<script type="text/javascript" charset="utf-8">
    $(function(){
        var order_id = "{$info.id}";
        setInterval(function (){
            $.ajax({
                url: "{:Url('check_settlement')}",
                type: "post",
                traditional: true,
                data: {order_id:order_id},
                success: function (e) {
                    if (e.code === 1){
                        window.location.href = "{:Url('grab/index')}";
                    }else {
                        var http = "{$http}";
                        $.get(http + "{:Url('agent/api/settle_order')}",function(){

                        });
                    }
                },
            });
        } , 3000)
    })
</script>

<script>
    var is_pop = $("#is_pop").val();
    var status = "{$info.status}";
    if (is_pop == 1 && status == 0){
        var img = $("#pop_img").val();
        var html = "<uni-img >\n" +
            "        <uni-view class=\"custom-modal show\">\n" +
            "            <uni-view data-v-3197bf80=\"\" class=\"modal-wrap\">\n" +
            "                <uni-view data-v-3197bf80=\"\" class=\"modal-background\"></uni-view>\n" +
            "                <uni-view data-v-3197bf80=\"\" class=\"modal-content\">\n" +
            "                    <uni-view data-v-413e3568=\"\" style=\"text-align: center\">\n" +
            "                        <uni-image data-v-413e3568=\"\" style=\"height: 320px;\">\n" +
            "                            <div style=\"background-image: url( "+img+");background-size: 100% 100%; background-repeat: no-repeat;\"></div>\n" +
            "                            <uni-resize-sensor>\n" +
            "                            </uni-resize-sensor>\n" +
            "                        </uni-image>\n" +
            "                    </uni-view>\n" +
            "                </uni-view>\n" +
            "                <uni-view data-v-3197bf80=\"\" class=\"btn\">\n" +
            "                    <uni-view class=\"sure-btn Confirm\">Confirm</uni-view>\n" +
            "                </uni-view>\n" +
            "            </uni-view>\n" +
            "            <uni-view class=\"hidden-btn Confirm\"></uni-view>\n" +
            "        </uni-view>\n" +
            "    </uni-img>";
        layer.open({
            type: 5,
            title: false,
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            content: html
        });

        let $modal = $("uni-img");
        $(".Confirm").on("click", closeModal);
        $(".close").on("click", closeModal);
        $modal.show();
        layer.closeAll('iframe');
        function closeModal() {
            layer.closeAll();
            $modal.hide();
        }
    }
</script>